<script setup lang="ts">
import { inject, Ref } from "vue";


const props = withDefaults(
  defineProps<{
    list: { label: string; value: number | string; }[];
    disabled?: boolean;
  }>(),
  {
    disabled: undefined,
  }
);

const formProps = inject<{
  disabled: Ref<boolean>;
}>("ByForm");

const modelValue = defineModel<string | number>();

const handleSelect = (item) => {
  const flag = props.disabled ?? formProps?.disabled.value;

  if (!flag) {
    modelValue.value = item.value;
  }
};
</script>

<template>
  <view class="flex">
    <view class="inline-flex items-center"
          v-for="(item, index) in list"
          :key="index"
          :class="index > 0 && 'ml-2'"
          @tap="handleSelect(item)">
      <MIcon
             :name="modelValue === item.value ? 'Checked' : 'UnChecked'"
             :class="modelValue === item.value ? 'text-primary' : 'text-second'" />
      <view class="pl-1">{{ item.label }}</view>
    </view>
  </view>
</template>
